<template>

  <div class="info">
    <van-nav-bar title="个人信息" right-text="修改" left-arrow @click-left="$router.back()"  @click-right="showPopup" />
    <van-cell-group>
      <van-cell title="头像" value="头像图片" >
        <template>
          <div class="c1"><img  style="width: 2.6rem;border-radius:25px;"  v-bind:src="updateInfo['headPortrait']"></div> <!--https://p.qqan.com/up/2021-3/16159586696789625.jpg -->
        </template>
      </van-cell>
      <van-cell title="昵称" :value="userInfo.name"/>
      <van-cell title="身份证号" :value="userInfo.userId" />
      <van-cell title="性别" :value="userInfo.sex == 0 ? '男':'女'" />
      <van-cell title="年龄" :value="userInfo.age" /><!-- label="描述信息"  -->
      <van-cell title="邮箱" :value="userInfo.email" />
      <van-cell title="电话" :value="userInfo.phoneNum" />
      <van-cell title="地址" :value="userInfo.adress" /><!-- label="描述信息"  -->

    </van-cell-group>
    <van-button type="danger" class="loginout" @click="logout">退出登录</van-button>
    <index></index>

<!--    修改个人资料弹出层-->
    <van-popup v-model="show" round position="bottom" :style="{ height: '60%' }" >
      <div style="height: 15px"></div>
      &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #646566;font-size: 14px">头像</span> &nbsp;&nbsp;&nbsp;
      <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="1" />
      <van-form @submit="onSubmit">
        <van-field
          v-model="updateInfo['name']"
          name="name"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />

        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="updateInfo['sex']"  direction="horizontal">
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="updateInfo['age']"
          name="age"
          label="年龄"
          placeholder="年龄"
          :rules="[{ required: true, message: '请填写年龄' }]"
        />
        <van-field
          v-model="updateInfo['adress']"
          name="adress"
          label="地址"
          placeholder="地址"
        />
        <van-field
          v-model="updateInfo['email']"
          name="email"
          label="邮箱"
          placeholder="邮箱"
        />
        <van-field
          v-model="updateInfo['phoneNum']"
          name="phoneNum"
          label="电话号"
          placeholder="电话号"
        />
        <van-field
          readonly
          v-model="updateInfo['userId']"
          name="userId"
          label="身份证号"
          placeholder="身份证号"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">修改</van-button>
        </div>
      </van-form>

    </van-popup>
  </div>

</template>


<script>
  import Vue from 'vue';
  import {ContactCard, Toast} from 'vant';
  import { List } from 'vant';
  import { Cell, CellGroup } from 'vant';
  import{NavBar}from'vant';
  import request from '@/utils/request'
  import { Button } from 'vant';
  import { Image } from 'vant';
  import { Dialog } from 'vant';
  import Index from "./index/index";
  import axios from 'axios'

  import { Popup } from 'vant';
  import { Form } from 'vant';
  import { Field } from 'vant';
  import { RadioGroup, Radio } from 'vant';
  import { Uploader } from 'vant';
  import Global from "./Global";

  Vue.use(Uploader);
  Vue.use(Radio);
  Vue.use(RadioGroup);
  Vue.use(Field);
  Vue.use(Form);
  Vue.use(Popup);
  Vue.use(Image);

  Vue.use(Button);
  Vue.use(NavBar);
  Vue.use(Cell);
  Vue.use(CellGroup);
  Vue.use(List);
  export default {
      name: "homepage",
    components: {Index},
    data(){
        return {
          userInfo:{},
          show:false,
          updateInfo: {}, //name age adress email phoneNum sex userId
          fileList: [],
        }
      },
      mounted()
      {
        request({
          url: '/customer/userInfo',
          method: 'get'
        }).then(res => {
          res['headPortrait'] = Global.serverSrc + res['headPortrait'];
          this.userInfo = res;
          this.updateInfo = res;
          console.log(this.userInfo);
        });
      },
      methods:{
        afterRead(file) {
          // 此时可以自行将文件上传至服务器
          let formData = new FormData();
          formData.append("file",file.file,file.file.name);
          axios.post(Global.serverSrc + '/customer/uploadImg',formData,{
            headers: {
              'Content-Type':'multipart/form-data',
              'token': window.localStorage.getItem('token')
            }
          }).then(resfirst=>{
            request({
              url: '/customer/userInfo',
              method: 'get'
            }).then(res => {
              res['headPortrait'] = Global.serverSrc + res['headPortrait'];
              this.userInfo = res;
              this.updateInfo = res;
              console.log(this.userInfo);
            });
            console.log(resfirst.message);
          });
        },
        onSubmit(values) {   //修改信息的表单提交
          request({
            url: '/customer/updateInfo',
            method: 'post',
            data: values
          }).then(res => {
            if (res.code === 200){
              res = res.data;
              res['headPortrait'] = Global.serverSrc + res['headPortrait'];
              this.userInfo = res;
              this.updateInfo = res;
              console.log(this.userInfo);
              Dialog({ message: '修改成功！' });
            }else {
              Dialog({ message: '修改失败！' });
            }

          });
          console.log('submit', values);
        },
        logout(){
          let that = this;
          Dialog.confirm({
            title: '退出确认',
            message: '是否确认退出，退出后将无法查看收藏和订单',
          })
            .then(() => {
              localStorage.clear();
              Toast('退出成功，即将自动跳转');
              setTimeout(function (){
                that.$router.push('/')
              }, 1000);

            })
            .catch(() => {
              // on cancel
            });
        },
        showPopup() {
          this.show = true;
        },
      }
  }
</script>

<style scoped>

  .loginout{
    margin-left: 3%;
    width: 94%;
  }

</style>
